<template>
    <div>
        <!-- 顶部搜索 -->
        <div class="source-search-base">
            <div @click="conditionCheck(4)" class="one">
                <span class="singleSee">{{countryName}}</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <div class="two">
                <span class="fa fa-search"></span>
                <span>请输入国家地区</span>
                <!-- <input type="text" placeholder="" /> -->
            </div>
            <img class="three" src="../../assets/img/tixing.png" alt />
        </div>
        <!-- 四大筛选栏 -->
        <div class="condition">
            <div class="condition-left">
                <div
                    @click="conditionColor = index;conditionCheck(index)"
                    v-for="(item,index) in condition"
                    :key="index"
                    :class="[conditionColor == index?'chooseColor':'']"
                >
                    <span>{{item}}</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </div>
            <div class="condition-right">
                <img src="../../assets/img/paixu.png" alt />
            </div>
        </div>

        <!-- 地区列表 -->
        <div class="scroll-range" style="height:76vh">
            <sourceList></sourceList>
        </div>
        <!-- 地区 -->
        <transition name="fade">
            <div @click="conditionCheck(0)" class="conditon-type" v-show="show0">
                <transition name="down2">
                    <div
                        style="height:40vh"
                        class="source-areas-list"
                        v-show="show0"
                    >
                        <div class="source-areas-list-left">
                            <p
                                @click="setCountrys(index,item.id)"
                                :class="{chooseColor:index == areaColor}"
                                v-for="(item,index) in areaList"
                                :key="index"
                            >{{item.name}}</p>
                        </div>
                        <div class="source-areas-list-right">
                            <p
                                @click="getCityID(index,item.name,item.id)"
                                :class="{chooseColor:index == citysColor}"
                                v-for="(item,index) in areaCitys"
                                :key="index"
                            >{{item.name}}</p>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>

        <!-- 国家-->
        <transition name="fade">
            <div @click="conditionCheck(4)" class="conditon-type countrysTop" v-show="show4">
                <transition name="down2">
                    <div v-show="show4" class="source-size-list">
                        <p
                            @click="getCountry(index,item.name,item.id)"
                            :class="{chooseColor:index == priceColor}"
                            v-for="(item,index) in countryList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item.name}}</p>
                    </div>
                </transition>
            </div>
        </transition>












        <!-- 价格-->
        <transition name="fade">
            <div @click="conditionCheck(1)" class="conditon-type" v-show="show1">
                <transition name="down2">
                    <div v-show="show1" class="source-size-list">
                        <p
                            @click="getPrice(index,item)"
                            :class="{chooseColor:index == priceColor}"
                            v-for="(item,index) in priceList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 户型-->
        <transition name="fade">
            <div @click="conditionCheck(2)" class="conditon-type" v-show="show2">
                <transition name="down2">
                    <div v-show="show2" class="source-size-list">
                        <p
                            @click="getSize(index,item)"
                            :class="{chooseColor:index == sizeColor}"
                            v-for="(item,index) in sizeList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 更多-->
        <transition name="fade">
            <div class="conditon-type" v-show="show3">
                <transition name="down2">
                    <div class="source-more-list" v-show="show3">
                        <div
                            v-for="(item,index) in moreNum"
                            :key="index"
                            class="source-more-list-detail"
                        >
                            <p>{{item.name}}</p>
                            <span
                                @click="setColor(idx,v.id,index)"
                                :class="v.now?'moreColor':''"
                                v-for="(v,idx) in item.nameList"
                                :key="idx"
                            >{{v.label}}</span>
                        </div>
                        <div class="source-more-btn">
                            <div @click="setReset">重置</div>
                            <div @click="submitComfirm">确定</div>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>

    
    </div>
</template>


<script>
import sourceList from "../../components/sourceList";
export default {
    name:'sources',
    data() {
        return {
            conditionColor: "-1",
            show0: false,
            show1: false,
            show2: false,
            show3: false,
            show4:false,
            condition: ["地区", "价格", "户型", "更多"],
            bgTopOne: "90",
            //价格
            priceColor: 0,
            priceList: [
                "全部",
                "50万以下",
                "50-100万",
                "100-200万",
                "200-300万",
                "300-500万",
                "700-1000万",
                "1000万以上"
            ],
            //户型
            sizeColor: 0,
            sizeList: [
                "不限1",
                "一居室2",
                "一居室3",
                "一居室4",
                "一居室5",
                "一居室6",
                "一居室7",
                "一居室8"
            ],
            //更多
            moreId: [],//存储面积的所选id
            moreNum: [//面积选择
                {
                    name: "面积(m²)",
                    nameList: [
                        { id: 1, label: "50以下" },
                        { id: 2, label: "50-100" },
                        { id: 3, label: "100-200" },
                        { id: 4, label: "200以上" },
                    ]
                },
            ],
            salesId:[],//销售所选id
            salesStatus:[//销售状态
                {
                    name: "销售状态",
                    nameList: [
                        { id: 1, label: "在售" },
                        { id: 2, label: "代售" },
                    ]
                },
            ],
            //地区
            citysColor: "-1",
            areaColor: 0,
            areaCitys: [],//地区right
            areaList: [],//地区left
            areaID:'',
            //国家
            countryList:[],
            countryName:'美国',
            countryId:"",      
        };
    },
    components: {
        sourceList
    },
    created() {
        //获取国家列表
        this.gainCountryList();
    },
    methods: {
        //获取国家列表初始化
        gainCountryList(){
            var params = {
                page:1,
                rows:250
            }
            this.$axios.get(this.address.gainListCountrys,{params:params}).then(res => {
                this.countryList = res.data.data
                //获取默认美国id
                for(var i=0;i<res.data.data.length;i++){
                    if(res.data.data[i].name == this.countryName){
                        this.countryId = res.data.data[i].id
                    }
                }
                //初始化美国获取美国的地区
                this.gainCityList(this.countryId,3)
                this.rightArea(this.countryId)  
            })
        },
        //国家选择下的地区列表更新
        getCountry(index, name,id) {
            this.priceColor = index;
            this.countryName = name;
            this.areaCitys = [];
            //点击国家下拉列表获取新的国家下的地区
            this.areaList = this.gainCityList(id,3)    
            this.rightArea(id) 
        },
        //获取地区列表（3为left，4为right）
        gainCityList(id,level){
            var params = {
                page:1,
                rows:250,
                level:level,
                countryId:id
            }
            this.$axios.get(this.address.gainCityList,{params:params}).then(res => {
                console.log(res.data.data)       
                if(level == 3){
                    this.areaList = res.data.data                 
                }else if(level == 4){
                    this.areaCitys = res.data.data
                }
            })
        },   
        // 初始化right边的地区
        rightArea(id){
            var params = {
                page:1,
                rows:250,
                level:3,
                countryId:id
            }
            this.$axios.get(this.address.gainCityList,{params:params}).then(res => {
                var params = {
                page:1,
                rows:250,
                level:4,
                countryId:res.data.data[0].id
            }
            this.$axios.get(this.address.gainCityList,{params:params}).then(res => {
                this.areaCitys = res.data.data
            })
            })
            
        },
        //地区
        setCountrys(index,cityId) {
            console.log(cityId);
            this.areaColor = index;
            this.citysColor = '-1'
            this.gainCityList(cityId,4)
            event.stopPropagation();
        },
        //获取所选地区名
        getCityID(index, name,id) {
            this.citysColor = index;
            this.condition[0] = name;
            this.areaID = id
            console.log(this.areaID)
        },


































        //总价
        getPrice(index, price) {
            this.priceColor = index;
            this.condition[1] = price;
        },   
        //户型
        getSize(index, size) {
            this.sizeColor = index;
            this.condition[2] = size;
        },
        //更多
        setColor(idx, id, index) {
            //console.log(idx, 888);
            //console.log(this.moreNum[index].nameList[idx]);
            var now = this.moreNum[index].nameList[idx].now;
            this.moreNum[index].nameList[idx].now = !now;
        },
        submitComfirm() {
            var moreId = [];
            for (var i = 0; i < this.moreNum.length; i++) {
                for (var j = 0; j < this.moreNum[i].nameList.length; j++) {
                    if (this.moreNum[i].nameList[j].now) {
                        moreId.push(this.moreNum[i].nameList[j].id);
                    }
                }
            }
            this.moreId = moreId;
            console.log(moreId);
        },
        setReset() {
            for (var i = 0; i < this.moreNum.length; i++) {
                this.moreNum[i].nameList.forEach((item, index) => {
                    this.$set(item, "now", false);
                });
            this.moreId = [];
                console.log(this.moreId)
            }
        },
        //下拉列表显示与隐藏
        conditionCheck(index) {
            // this.
            //console.log(index)
            switch (index) {
                case 0:
                    this.show0 = !this.show0;
                    this.show1 = false;
                    this.show2 = false;
                    this.show3 = false;
                    this.show4 = false;
                    break;
                case 1:
                    this.show1 = !this.show1;
                    this.show0 = false;
                    this.show2 = false;
                    this.show3 = false;
                    this.show4 = false;
                    break;
                case 2:
                    this.show2 = !this.show2;
                    this.show0 = false;
                    this.show1 = false;
                    this.show3 = false;
                    this.show4 = false;
                    break;
                case 3:
                    this.show3 = !this.show3;
                    this.show0 = false;
                    this.show1 = false;
                    this.show2 = false;
                    this.show4 = false;
                    break;
                case 4:
                    this.show4 = !this.show4;
                    this.show0 = false;
                    this.show1 = false;
                    this.show2 = false;
                    this.show3 = false;
                    break;
            }
        },
    },
    mounted() {
        for (var i = 0; i < this.moreNum.length; i++) {
            this.moreNum[i].nameList.forEach((item, index) => {
                this.$set(item, "now", false);
            });
        }
    },
};
</script>
<style lang="less" scoped>
.source-areas-list {
    //border-top: 1px solid @blackColor3;
    width: 100%;
    max-height: 40vh;
    background-color: @white;
    overflow-y: scroll;
    .flexBetween();
    div {
        width: 50%;
        padding: 10px 15px;
        height: 100%;
        overflow-y: scroll;
    }
    p {
        font-size: 14px;
        color: @blackColor8;
        padding: 1.5vh 0;
    }
    .source-areas-list-right {
        background-color: @blackColor3;
    }
}
.source-size-list {
    width: 100%;
    max-height: 40vh;
    background-color: @white;
    overflow-y: scroll;
    //border-top: 1px solid @blackColor3;
    .source-size-list-detail {
        font-size: 14px;
        text-align: center;
        padding: 2.5vh 0;
    }
}

.source-more-list {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    //border-top: 1px solid @blackColor3;
    .source-more-list-detail {
        padding: 10px 15px 10px;
        border-bottom: 1px solid @blackColor3;
        margin-bottom: 10px;
        p:nth-child(1) {
            color: @blackColor8;
            font-size: 16px;
            margin-bottom: 15px;
        }
        span {
            display: inline-block;
            color: @blackColor8;
            font-size: 14px;
            border: 1px solid @blackColor3;
            border-radius: 20px;
            padding: 4px 20px;
            margin: 0 20px 10px 0;
        }
    }
}
.source-more-btn {
    height: 58px;
    width: 100%;
    padding: 4px 15px;
    border-top: 1px solid @blackColor3;
    .flexBetweenCenter();
    div {
        margin-top: 10px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        border-radius: 4px;
    }
    div:nth-child(1) {
        width: 35%;
        height: 40px;
        border: 1px solid @blackColor3;
    }
    div:nth-child(2) {
        width: 62%;
        height: 40px;
        color: @white;
        background-color: @blueColor5;
    }
}
//更多
.moreColor {
    background-color: @blueColor5;
    border: 1px solid @blueColor5 !important;
    color: @white !important;
}
.countrysTop{
    top:7vh;
    height: 93vh;
}
// -----
.singleSee{
    display: inline-block;
}
</style>
